<template>
	<view class="page">
		<!-- 列表 -->
		<quick-group-list :list="items" :openId="openId" :fields="{unread:'unreadNumber'}" forceDisplay
			@detail="itemToDetail" @detailMore="moreHandle"></quick-group-list>

		<template v-if="loadMoreStatus!=='loading'&&!items.length">
			<u-empty marginTop="21.7vh" width="240rpx" height="240rpx" text="暂无群聊" textSize="28rpx" textColor="#86909C"
				icon="https://file.casugn.com/storecompcard/temp/Add Comment@2x_1681113604168.png"></u-empty>
		</template>

		<template v-if="loadMoreStatus==='loading'">
			<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus"
				@loadmore="scrolltolower" />
		</template>

		<!-- 新增按钮 -->
		<cus-add-btn :safeAreaInsetBottom="true" @click="addHandle"></cus-add-btn>

		<!-- 新增/编辑弹窗 -->
		<quick-group-popup ref="QuickGroup" isGroup @refresh="refresherrefresh"></quick-group-popup>

		<!-- 更多操作弹窗 -->
		<quick-group-more ref="More" title="请选择操作" :list="actionList" @itemClick="moreItemClick"></quick-group-more>

		<!-- 群管理权转移 -->
		<quick-group-transfer ref="Transfer" @refresh="refresherrefresh"></quick-group-transfer>

		<!-- 群二维码 -->
		<quick-group-qrcode ref="GroupQrcode"></quick-group-qrcode>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import QuickGroupList from '../components/quick-group-list/quick-group-list.vue'
	import QuickGroupPopup from '../components/quick-group-popup/quick-group-popup.vue'
	import QuickGroupMore from '../components/quick-group-more/quick-group-more.vue'
	import QuickGroupTransfer from './components/quick-group-transfer.vue'
	import QuickGroupQrcode from '../components/quick-group-qrcode/quick-group-qrcode.vue'

	export default {
		components: {
			QuickGroupList,
			QuickGroupPopup,
			QuickGroupMore,
			QuickGroupTransfer,
			QuickGroupQrcode
		},
		data() {
			return {
				actionList: [{
						name: '编辑',
						value: 'edit',
						show: true,
					},
					// {
					// 	name: '移交',
					// 	value: 'transfer',
					// 	show: true,
					// },
					{
						name: '解散',
						value: 'delete',
						show: true,
					},
					{
						name: '群二维码',
						value: 'qrcode',
						show: true,
					},
				],

				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['openId']),
		},
		onShow() {
			this.loadMoreStatus = 'loading'
			this.pageNo = 1
			this.getDBData()
		},
		onPullDownRefresh() {
			this.refresherrefresh()
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			this.scrolltolower()
		},
		methods: {
			itemToDetail({
				item,
				index
			}) {
				uni.navigateTo({
					url: `/pagesCard/quickGroupDetail/quickGroupDetail?id=${item.id}`
				})
			},
			//显示弹窗
			moreHandle({
				item,
				index
			}) {

				// 编辑
				this.$set(this.actionList[0], 'show', item.openId === this.openId)
				// 解散
				this.$set(this.actionList[1], 'show', item.openId == this.openId)

				this.$refs.More.show(item, index)
			},
			moreItemClick({
				value,
				index,
				data,
				dataIndex
			}) {

				console.log(data, '-----data-----');
				switch (value) {
					case 'edit':
						this.$refs.QuickGroup.edit(data)
						break;
					case 'transfer':
						this.$refs.Transfer.show(data)
						break;
					case 'delete':
						this.deleteHandle(data, dataIndex)
						break;
					case 'qrcode':
						this.$refs.GroupQrcode.show({
							page: 'pagesCard/joinQuickGroup/joinQuickGroup',
							id: data.id
						})
						break;
				}
			},
			addHandle() {
				this.$refs.QuickGroup.add()
			},
			deleteHandle(item, index) {
				const that = this
				uni.showModal({
					content: `确认解散群聊[${item.groupName}]?`,
					success: async (res) => {
						if (res.confirm) {
							let res = await this.$api.delQuickGruopListById(item.id)
							if (res.success) {
								uni.showToast({
									title: '解散成功！',
									icon: 'none'
								});
								that.items.splice(index, 1)
							} else {
								uni.showToast({
									title: res.message || '解散失败！',
									icon: 'none'
								});
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			async getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					openId: this.openId,
					hasParent: 0, // 是否拥有上级群组 0:没有 1:有
					column: 'createTime',
					order: 'desc',
				}
				let res = await this.$api.queryMyGroupByOpenId(params)
				if (res.success) {
					let tData = res.result.records
					if (type === 'refresh') {
						this.items = tData
					}
					if (type === 'add') {
						this.items.push(...tData)
					}
					console.log('群组列表：', this.items);
					this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(async () => {
					await this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.page {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>